<template>
  <div class="check-publish">
    <head-top head-title="发布查验" hidden='true' go-back="true" publish-all-check="发布" @publishAllCheck="publishAllCheck"></head-top>
    <!-- <div class="project-name">
      <span>项目名称：</span>
      <input type="text" placeholder="请输入项目名称" v-model="proName">
    </div> -->
    <!-- <mt-field label="项目名称：" placeholder="请输入项目名称" v-model="proName"></mt-field> -->
    <!-- <div class="split"></div> -->
    <div class="classfiy">
      <div class="line border-bottom">
        请选择一个类别
      </div>
      <ul class="items clearfix">
        <li v-for="(item,index) in cateInfo" :key="index" class="item" @click="selectPublish(item.id)">
          <span class="title" :class="{'active': pid === item.id}">
          {{item.name}}
          </span>
        </li>
      </ul>
      <div class="lift" v-if="pid === 1" @click="showLiftNum">
      <!-- <span>电梯编号：</span> -->
        <div class="lift-num">
          <mt-cell title="电梯编号：" is-link :value="liftNum"></mt-cell>
        </div>
      <!-- <input type="text" placeholder="请输入电梯编号" v-model.trim="liftNum"> -->
        <!-- <mt-field label="电梯编号：" placeholder="请输入电梯编号" v-model.trim="liftNum"></mt-field> -->
      </div>
    </div>
    <div class="split"></div>
    <div class="check-wrapper" v-show="publishList && pid != 1">
      <!-- <a class="border-bottom" :href="`/StartCheck/${item.id}`" :key="index" v-for="(item,index) in publishList"> -->
      <div @click="StartCheck(item.id)" class="last-line" :key="index" v-for="(item,index) in publishList">
        <mt-cell :title="item.name" is-link>
          <span v-show="item.status === 0">开始查验</span>
          <span v-show="item.status === 1" :class="{'no-allready': item.status === 1}">未查验完</span>
          <span v-show="item.status === 2" :class="{'allready': item.status === 2}">已查验完</span>
        </mt-cell>
      </div>
    </div>
    <div class="check-wrapper" v-show="publishList1 && pid === 1">
      <!-- <a class="border-bottom" :href="`/StartCheck/${item.id}`" :key="index" v-for="(item,index) in publishList"> -->
      <div @click="StartCheck(item.id)" class="last-line" :key="index" v-for="(item,index) in publishList1">
        <mt-cell :title="item.name" is-link>
          <span v-show="item.status === 0">开始查验</span>
          <span v-show="item.status === 1" :class="{'no-allready': item.status === 1}">未查验完</span>
          <span v-show="item.status === 2" :class="{'allready': item.status === 2}">已查验完</span>
        </mt-cell>
      </div>
    </div>
    <div class="split"></div>
    <div class="text">
      <div class="line border-bottom">
        整改意见
      </div>
      <textarea @keyup="writeContent" @input="writeContent" name="" id="" placeholder="请对查验的结果进行描述..." cols="30" rows="10" v-model="summary"
                maxlength="200"></textarea>
      <div class="count">
        {{currentCount}}/{{totalCount-currentCount}}
      </div>
    </div>
    <div class="lift-show">
      <mt-popup
        v-model="liftNumShow"
        popup-transition="popup-fade">
        <ul>
          <li v-show="liftNumList.length" class="num border-bottom" v-for="(item,index) in liftNumList" :key="index" @click="selectLiftNum(item)">{{item}}</li>
          <li v-show="!liftNumList.length" class="num border-bottom" style="font-size: 15px; margin-top: 30%">该小区电梯编号数据暂无</li>
        </ul>
      </mt-popup>
    </div>
  </div>
</template>

<script>
import headTop from '../header/Header.vue'
import {getCheckPublishCategory, getCheckPublishList, getLiftNum, getLiftCheckData, goPublishAllCheck} from '../../api/jianli.js'
import {Toast} from 'mint-ui'
import {loadClickData, saveClickData, saveLiftNum, loadLiftNum} from '../../common/js/cache.js'
// import bus from '../../common/js/commonvue.js'
export default {
  name: 'CheckPublish',
  data() {
    return {
      cateInfo: [],
      publishList: [],
      publishList1: [],
      pid: '',
      active: false,
      // proName: '',
      totalCount: 200,
      currentCount: 0,
      summary: '',
      liftNum: '',
      liftNumList: [],
      liftNumShow: false,
      relatedId: '',
      checkStatus: ''
    }
  },
  components: {
    headTop
  },
  created() {
    this.liftNum = loadLiftNum()
    if (!loadClickData()) {
      saveClickData(1)
    }
    if (loadLiftNum() != undefined) {
      if (loadClickData() === 1) {
        getLiftCheckData(1, loadLiftNum()).then(res => {
          this.publishList1 = res.data.data
          this.summary = res.data.summary
          this.currentCount = this.summary.length
          this.checkStatus = res.data.status
          this.pid = res.data.id
          this.relatedId = res.data.related_id
        })
      } else {
        this._getCheckPublishList(loadClickData() || 1)
      }
    } else {
      this._getCheckPublishList(loadClickData() || 1)
    }
    // this._getCheckPublishList(loadClickData() || 1)
    this._getCheckPublishCategory()
  },
  methods: {
    // 点击开始查验时，先判断电梯编号是否已填
    StartCheck(id) {
      if (this.pid === 1 && !this.liftNum) {
        Toast({
          message: '电梯编号必填',
          position: 'middle',
          duration: 1000
        })
        this.liftNum = 0
        return
      }
      if (!this.liftNum) {
        this.liftNum = 0
      }
      if (this.pid != 1) {
        this.liftNum = 0
      }
      this.$router.push(`/StartCheck/${id}/${this.liftNum}`)
    },
    // 字体有没有超过预定值
    writeContent() {
      this.currentCount = this.summary.length
      let remainCount = this.totalCount - this.currentCount
      if (!remainCount) {
        Toast({
          message: '字数不能超过200',
          position: 'middle',
          duration: 1000
        })
      }
    },
    // 获取发布的类别
    _getCheckPublishCategory() {
      getCheckPublishCategory().then(res => {
        if (res.code === 200) {
          this.cateInfo = res.data
        }
      })
    },
    // 通过获取到的类别id
    _getCheckPublishList(id) {
      getCheckPublishList(id, this.liftNum).then(res => {
        if (res.code === 200) {
          this.pid = res.data.id
          this.publishList = res.data.data
          this.summary = res.data.summary
          this.currentCount = this.summary.length
          this.checkStatus = res.data.status
          this.relatedId = res.data.related_id
        }
      })
    },
    selectPublish(id) {
      // 缓存选中的类别id
      saveClickData(id)
      // this._getCheckPublishList(id)
      if (id != 1) {
        this.liftNum = 0
        this.summary = ''
        this.currentCount = this.summary.length
        this._getCheckPublishList(id)
      } else {
        this.liftNum = loadLiftNum()
        this.summary = ''
        getLiftCheckData(1, loadLiftNum() || 0).then(res => {
          this.publishList1 = res.data.data
          this.summary = res.data.summary
          this.currentCount = this.summary.length
          this.pid = res.data.id
          this.checkStatus = res.data.status
          this.relatedId = res.data.related_id
        })
      }
    },
    // 显示点击电梯编号后弹出电梯编号
    showLiftNum() {
      getLiftNum().then(res => {
        if (res.code === 200) {
          this.liftNumList = res.data
          this.liftNumShow = true
        } else {
          alert('获取数据失败')
        }
      })
    },
    // 选择电梯编号去请求电梯的查验状态
    selectLiftNum(item) {
      this.liftNumShow = false
      this.liftNum = item
      saveLiftNum(this.liftNum)
      getLiftCheckData(1, item).then(res => {
        this.publishList1 = res.data.data
        this.summary = res.data.summary
        this.currentCount = this.summary.length
        this.checkStatus = res.data.status
      })
    },
    publishAllCheck() {
      if (loadClickData() === 1) {
        if (this.liftNum === undefined) {
          Toast({
            message: '电梯编号必填',
            position: 'middle',
            duration: 1000
          })
          return
        }
        if (this.checkStatus === 0) {
          Toast({
            message: '你还未开始查验',
            position: 'middle',
            duration: 1000
          })
          return
        }
        goPublishAllCheck(this.pid, this.liftNum, this.summary).then(res => {
          if (res.code === 200) {
            Toast({
              message: '发布成功',
              position: 'middle',
              duration: 1000
            })
            history.replaceState({}, '', '/CheckPublish')
            this.$router.push(`/CheckDetailList/${this.relatedId}`)
          } else {
            Toast({
              message: '发布失败，退出重试',
              position: 'middle',
              duration: 1000
            })
          }
        })
      }
      if (loadClickData() != 1) {
        if (this.checkStatus === 0) {
          Toast({
            message: '你还未开始查验',
            position: 'middle',
            duration: 1000
          })
          return
        }
        goPublishAllCheck(this.pid, 0, this.summary).then(res => {
          if (res.code === 200) {
            Toast({
              message: '发布成功',
              position: 'middle',
              duration: 1000
            })
            history.replaceState({}, '', '/CheckPublish')
            this.$router.push(`/CheckDetailList/${this.relatedId}`)
          } else {
            Toast({
              message: '发布失败，退出重试',
              position: 'middle',
              duration: 1000
            })
          }
        })
      }
    }
  }
}
</script>

<style lang="scss">
@import '../../common/sass/mixin.scss';
  .check-publish{
    padding-top: 40px;
    .lift{
      .lift-num{
        .mint-cell:last-child{
          background-size: 100% 0px;
        }
        .mint-cell-wrapper{
          background-size: 100% 0px;
        }
      }
    }
    .lift-show{
      .mint-popup {
        width: 60%;
        height: 30%;
        border-radius: 4px;
        overflow: auto;
        .num {
          height: 40px;
          line-height: 40px;
          text-align: center;
        }
      }
    }
    input{
      outline: none;
      border: none;
      color: #666;
      font-size: 14px;
    }
    .project-name{
      margin: 0 10px;
      height: 44px;
      line-height: 44px;
      span{
        font-size: 15px;
      }
    }
    .mint-cell{
      min-height: 44px;
    }
    .check-wrapper{
      .allready {
        color: #666;
      }
      .no-allready {
        color: red;
      }
      a{
        display: block;
        color: #000;
      }
      .mint-cell{
        min-height: 44px;
        &:last-child{
          background-size: 100% 0px;
          .mint-cell-wrapper{
          // background-size: 100% 0px;
        }
      }
      .mint-cell-wrapper{
        background-position: bottom left;
        background-size: 100% 1px;
      }
      .mint-cell-value.is-link {
        margin-right: 12px;
        color: #0078de;
        font-size: 12px;
      }
    }
    .last-line {
        &:last-child{
          .mint-cell{
            .mint-cell-wrapper{
              background-size: 100% 0px;
              // background-color: hotpink;
            }
          }
        }
      }
    }
    .text {
      padding: 10px;
      position: relative;
      .line {
        height: 20px;
        line-height: 20px;
        margin-bottom: 10px;
      }
      textarea {
        box-sizing: border-box;
        width: 100%;
        padding: 10px;
        height: 120px;
        background: #f2f2f2;
        border-radius: 7px;
        resize: none;
        outline: none;
        border: none;
        font-size: 12px;
        line-height: 16px;
      }
      .count {
        position: absolute;
        bottom: 20px;
        right: 20px;
        color: #0078de;
      }
    }
    .split{
      width: 100%;
      height: 10px;
      background-color: #f2f2f2;
    }
    .classfiy {
      padding: 0 10px;
      .lift{
        height: 44px;
        line-height: 44px;
        span{
          font-size: 15px;
        }
      }
      .line{
        height: 30px;
        line-height: 30px;
        padding-left: 8px;
      }
      .items{
        .item{
          float: left;
          width: 25%;
          height: 30px;
          line-height: 30px;
          margin:7px 0px;
          text-align: center;
          .title{
            width: 82%;
            display: inline-block;
            border: 1px solid #d9d9d9;
            // padding: 8px 10px;
            border-radius: 3px;
            color: #292929;
          }
          .active{
            border: 1px solid #0078de;
            color: #0078de;
          }
        }
      }
    }
  }
</style>
